<template>
  <el-row>
    <el-row>
      <el-button type="primary" @click="importExcel1">导入</el-button>
    </el-row>
  </el-row>
  <br>
  <el-row>
    <el-table v-loading="loading1" :data="dataList1" border :span-method="objectSpanMethod" class="borderTable">
      <el-table-column label="编号" align="center" prop="vulnerabilityCode" />
      <el-table-column label="经度" align="center" prop="vulnerabilityCode" />
      <el-table-column label="纬度" align="center" prop="vulnerabilityCode" />
      <el-table-column label="破坏程度" align="center" prop="damage">
        <template #default="scope">
          <span>{{ getPgcd(scope.row.damage) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="mr">
        <template #header>
          <span>m<sub>R,D</sub></span>
        </template>
      </el-table-column>
      <el-table-column label="brd" align="center" prop="br">
        <template #header>
          <span>β<sub>R,D</sub></span>
        </template>
      </el-table-column>
      <el-table-column label="查看" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" prop="vulnerabilityCode">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleUpdata(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="pageSize.page" v-model:limit="pageSize.rows"
      @pagination="getList" />
  </el-row>
  <!-- 导入 -->
  <ExcelImport v-model:open="importOpen1" :uploadParams="uploadParams1" @importSuccess="importSuccess1" />

  <el-dialog v-model="dialogVisible" title="查看" width="500px">
    <p></p>
    <div id="mainEcharts"></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogVisible1" title="修改" width="500">
    <p></p>
    <el-form ref="formRef" :rules="rules" :model="params" label-width="0px">
      <el-table :data="params.dataLists" border :span-method="objectSpanMethod" class="borderTable">
        <el-table-column label="编号" align="center" prop="vulnerabilityCode" />
        <el-table-column label="经度" align="center" prop="longitude" />
        <el-table-column label="纬度" align="center" prop="latitude" />
        <el-table-column label="破坏程度" align="center" prop="damage">
          <template #default="scope">
            <span>{{ getPgcd(scope.row.damage) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="mr">
          <template #header>
            <span>m<sub>R,D</sub></span>
          </template>
          <template #default="{ row, $index }">
		  			<el-form-item :prop="`dataLists.${$index}.mr`" :rules="rules.mr">
		  				<el-input type="number" v-model="row.mr" placeholder="" />
		  			</el-form-item>
		  		</template>
        </el-table-column>
        <el-table-column label="brd" align="center" prop="br">
          <template #header>
            <span>β<sub>R,D</sub></span>
          </template>
          <template #default="{ row, $index }">
		  			<el-form-item :prop="`dataLists.${$index}.br`" :rules="rules.br">
		  				<el-input type="number" v-model="row.br" placeholder="" />
		  			</el-form-item>
		  		</template>
        </el-table-column>
      </el-table>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit(formRef)">保存</el-button>
        <el-button @click="dialogVisible1 = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
// 获取当前实例
const { proxy } = getCurrentInstance();
// 引入导入弹框
import * as echarts from 'echarts';
import { dataMethod } from '@/utils/spanTable.js'
import { getDict } from "@/api/system/dict";
import ExcelImport from '@/components/ExcelImport'
import { pageKilometer, detail ,update,echartsData} from '@/api/basicDataManage/ysxData'
import { nextTick, onMounted } from 'vue';
import { formContextKey } from 'element-plus';
const dataList1 = ref([]);
const loading1 = ref(false);
const total = ref(0);
const pageSize = ref({
  page: 1,
  rows: 10
})
// 表单对象
const formRef = ref();
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const rules = ref({
  mr: [{ required: true, message: '请输入', trigger: 'change' }],
  br: [{ required: true, message: '请输入', trigger: 'change' }],
})
// 导入
const importOpen1 = ref(false)
const templateName = ref('建筑物单体易损性数据导入模板.xlsx')
const uploadParams1 = ref({
  url: `/vulnerability/importExcel`,
  templateName: templateName.value,
  templateUrl: '/base/product/downloadExcel',
  downloadParams: { fileName: templateName.value }
})
const importExcel1 = () => {
  importOpen1.value = true;
}
const spanObj = ref();
function getList() {
  loading1.value = true;
  pageKilometer(pageSize.value).then(response => {
    dataList1.value = response.data.rows ? response.data.rows : [];
    total.value = response.data.total;
    spanObj.value = dataMethod(dataList1.value, ['vulnerabilityCode', 'longitude', 'latitude']);
    loading1.value = false;
  }).catch((err) => {
    dataList1.value = [];
    total.value = 0;
    loading1.value = false;
  });
}
/** 获取字典值 */
const pgcdData = ref([])
function getDictData() {
  getDict("pgcd").then(response => {
    pgcdData.value = response.data;
  });
}
function getPgcd(val) {
  var name = ''
  pgcdData.value.forEach(item => {
    if (item.dictItemCode == val) {
      name = item.dictItemName
      return
    }
  })
  return name || val;
}
// 表格合并
function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  //判断合并列
  // console.log(column)
  const _row = spanObj.value[column.property]
    ? spanObj.value[column.property][rowIndex]
    : 1;
  const _col = _row > 0 ? 1 : 0;
  return {
    rowspan: _row,
    colspan: _col,
  };
}
const importSuccess1 = () => {
  getList();
}
// 查看
const handleClick = (row) => {
  echartsList(row)
}
const echartsList = (row)=>{
  echartsData({br:row.br,mr:row.mr}).then(res=>{
    dialogVisible.value = true
    nextTick(()=>{
      initEchars(res.data)
    })
  })
}
// 修改
const handleUpdata = (row) => {
  handleDetail(row.vulnerabilityCode)
}
const params = ref({
  dataLists:[]
});
const handleDetail = (code) => {
  detail({ vulnerabilityCode: code }).then(res => {
    params.value.dataLists = res.data;
    dialogVisible1.value = true;
  })
}
const resultChart = ref(null);
function initEchars(data) {
  console.log(Object.values(data),'lalalla');
  echarts.init(document.getElementById('mainEcharts')).dispose()
  resultChart.value = echarts.init(document.getElementById('mainEcharts'));
  var option;
  option = {
    title: {
      text: ''
    },
    xAxis: {
      type: 'category',
      data: ['0.05g', '0.1g','0.2g','0.4g','0.8g','0.9g'],
      name: 'PGA'
    },
    yAxis: {
      type: 'value',
      name: '概率',
      min: 0,
      max: 1,
      interval: 0.2 
    },
    series: [
      {
        data: Object.values(data),
        type: 'line',
        smooth: true
      }
    ]
  };
  option && resultChart.value.setOption(option);
}
const handleSubmit = async (formEl)=>{
  if(!formEl) return;
  const formElValid = await formEl.validate((valid, fields) => { valid, fields });
  if(formElValid){
    update(params.value.dataLists).then(res=>{
      getList();
      proxy.$modal.msgSuccess("保存成功");
      dialogVisible1.value = false;
    })
  }
}
onMounted(() => {
  getDictData();
  getList();
})
</script>

<style lang="scss" scoped>
:deep(.el-table).borderTable td.el-table__cell {
  border-bottom: 1px solid #ebeef5 !important;
  border-right: 1px solid #ebeef5 !important;
}
#mainEcharts {
    width:100%;
    height:400px;
    background-color: #fff;
    box-shadow: 0 0 20px #0003;
    border: 1px solid #707070;
    border-radius: 4px;
    margin: 0 auto;
  }
</style>